<template>
    <div class="play">
        <div class="header">
            <div class="title">
                <router-link to="/">
                    <van-icon name="wap-home-o" size="30" color="gray"/>
                </router-link>
                <div class="music-info">
                    <p>{{name}}</p>
                </div>
                <router-link to="/search">
                    <van-icon name="search" size="30" color="gray"/>
                </router-link>
            </div>
        </div>
        <div class="song-info">
            <div class="song-info-img">
                <img :src="pic" alt />
            </div>
            <div class="iconbox">
                <van-icon name="like-o" size="33" color="gray"/>
                <i class="box"></i>
                <van-icon name="down" size="33" color="gray"/>
            </div>
        </div>
        <div class="song">
            <LRC :id="id" :currentTime="currentTime"/>
            <audio ref="player" :src="url" controls></audio>
        </div>
    </div>
</template>

<script>
import List from '@/api/index'
import LRC from './LRC'
export default {
    data() {
        return {
            url:'',
            currentTime:0
            
        };
    },
    components: {
        LRC
    },
    mounted() {
        let _this = this;
        List.getSongUrl(this.id).then(function(res){
            _this.url = res.data.data[0].url;
        })
        this.addEventHandle();
        
    },
    beforeDestroy(){
        this.removeEventHandle();
        
    },
    methods: {
        addEventHandle() {
            this.$refs.player.addEventListener("timeupdate",this.currentTimeHandle);
            this.$refs.player.addEventListener("ended",this.Handle);
            
        },
        removeEventHandle(){
            this.$refs.player.removeEventListener("timeupdate",this.currentTimeHandle)
        },
        currentTimeHandle(){
            this.currentTime = this.$refs.player.currentTime;
            console.log(this.currentTime)
            //console.log(this.$refs.player.duration);
        },
        hhel(){
            //console.log(this.$refs.player.duration)
            this.$store.commit('setSongCur', 1);
            //this.$store.commit('isPlay', true);
        },
        hhel2(){
            //this.$store.commit('music', this.url);
            this.$store.commit('setIsPlay', !this.$store.getters.getIsPlay);
            
        },Handle(){
            console.log('bofangwanbi')
        }
       
    },props:{
        id:'',
        name:'',
        pic:''
    }
};
</script>

<style scoped>

.play{
    background: #F1F1F1;
    height: 100%;
    width: 100%;
    position: absolute;
}

.header {
    padding: 15px;
}

.music-info {
    flex: 1;
    font-size: 20px;
}

.title {
    display: flex;
    text-align: center;
}

.left {
    font-size: 30px;
}

.ca {
    color: red;
}

.right {
    font-size: 30px;
}

.song-info {
    padding: 15px;
}

.song-info-img {
    text-align: center;
}

.song-info-img img {
    width: 50%;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.31);
}

.song-lrc {
    margin-top: 10px;
    min-height: 50px;
}

.iconbox {
    display: flex;
    margin-top: 30px;
}

.iconbox .box {
    flex: 1;
}

.song {
    width: 100%;
    text-align: center;
}

.song audio {
    width: 80%;
}

.active {
    color: #222;
}

.author {
    font-size: 12px;
    color: #999;
}
</style>